<template>
  <div>
    <!-- 标题 -->
    <div class="headers">
      <div class="header-box">
        <div class="header-l">
          <van-icon name="arrow-left" />
          <span @click="backTo">返回</span>
        </div>

        <h2 class="header-m">商品详情</h2>
        <div></div>
      </div>
    </div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in goods.gallery" :key="item.id">
        <img class="img" :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 文字 -->
    <div class="text-goods">
      <!-- 标题 -->
      <div class="header">
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
      </div>
      <!-- 介绍 -->
      <div class="introduce">
        <div class="introduce-txt">
          <p class="txt-t">{{ txtBox.name }}</p>
          <p class="txt-m">{{ txtBox.goods_brief }}</p>
          <p class="txt-b">{{ txtBox.retail_price }}</p>
        </div>
        <div class="introduce-b">
          <p>请选择规格数量</p>
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 参数 -->
      <div class="parameter" v-if="goods.info">
        <p class="parameter-txt">商品参数</p>
        <img class="img" :src="goods.info.primary_pic_url" alt="" />
        <ul class="goodTxt">
          <li
            class="goodTxt-item"
            v-for="item in goods.attribute"
            :key="item.id"
          >
            <div class="goodTxt-item-txt">
              {{ item.name }}
            </div>
            <div class="goodTxt-item-val">
              {{ item.value }}
            </div>
          </li>
        </ul>
      </div>

      <!-- 图片介绍 -->
      <div class="imgIn" v-html="imgIn"></div>
    </div>

    <!-- 底部商品 -->
    <div class="footer-goods" v-if="goods.productList">
      <ul class="newGoodList">
        <li
          class="newGoodList-item"
          v-for="el in goods.productList"
          :key="el.id"
          @click="toGoodsDetail(el.id)"
        >
          <img class="img" :src="el.list_pic_url" alt="" />
          <div class="goods-txt">
            <span class="txt-t">{{ el.name }}</span>
            <span class="txt-b">{{ el.retail_price }}</span>
          </div>
        </li>
        <li></li>
        \
      </ul>
    </div>
    <!-- 底部购买 -->
    <div class="footer" v-if="goods.info">
      <van-goods-action class="cart">
        <van-goods-action-icon
          :color="goods.collected ? 'red' : ''"
          @click="collect"
          icon="star-o"
          text="收藏"
        />
        <van-goods-action-icon
          @click="toCart"
          icon="shop-o"
          :badge="goods.allnumber"
          text="购物车"
        />
        <van-goods-action-button
          color="#CEA62A "
          type="warning"
          text="加入购物车"
          @click="addCarts"
        />
        <van-goods-action-button
          color="#A04C19"
          type="danger"
          text="立即购买"
        />
      </van-goods-action>
      <!-- 弹出层 -->
    </div>

    <van-popup
      closeable
      v-model="show"
      position="bottom"
      :style="{ height: '30%' }"
      v-if="goods.info"
    >
      <div class="popBox">
        <img class="img" :src="goods.info.primary_pic_url" alt="" />
        <div class="box-r">
          <span>价格</span>
          <span>数量</span>
          <van-stepper v-model="number" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { detailaction, addCart, addcollect } from "@/api/cart";

export default {
  name: "",
  data() {
    return {
      show: false,
      id: "",
      goods: "",
      txtBox: "",
      imgIn: "",
      number: "",
    };
  },
  watch: {
    $route(to, from) {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    toGoodsDetail(id) {
      this.id = id;
      this.$router.replace({
        path: "/home/goodsDetail",
        query: { id: this.id },
      });
      // this.$router.go(0);
    },
    init() {
      this.id = this.$route.query.id;
      // console.log(this.$route.query.id);
      detailaction({
        openId: localStorage.getItem("openId"),
        id: this.id,
      }).then((res) => {
        console.log(res);
        this.goods = res;
        this.txtBox = res.info;
        this.imgIn = res.info.goods_desc;
      });
    },

    backTo() {
      this.$router.back();
    },
    async addCarts() {
      if (this.show) {
        let res = await addCart({
          goodsId: this.id,
          number: this.number,
          openId: localStorage.getItem("openId"),
        });
        Toast.success("加入成功");

        console.log(res);
        this.init();
      } else {
        this.show = !this.show;
      }
    },
    async collect() {
      let a = await addcollect({
        goodsId: this.id,
        openId: localStorage.getItem("openId"),
      });
      console.log(a);
      this.init();
    },
    toCart() {
      this.$router.push("/cart");
    },
  },
};
</script>

<style scoped lang="scss">
@import "./scss/index.scss";
</style> >
<style lang="scss" scoped>
::v-deep .text-goods {
  img {
    width: 750px;
  }
}
::v-deep .van-popup--bottom {
  bottom: 95px;
}
::v-deep .van-goods-action {
  z-index: 2005;
}
</style>

